require.config({
    baseUrl:"./my_modules",
    paths:{
        jq:"../libs/jquery.2.2.4",
        gp:"getPro",
        cartRender:"cartRender",
        allCheck:"allCheck",
        filterData:"filterData"
    }
})

require(["jq","gp","cartRender","allCheck","filterData"],(_,getPro,render,allCheck,filterData)=>{
    // 1. 获取本地数据
    let goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];

    // 2. 获取后端数据
    getPro("http://localhost:3000/api",{
        type:"getPro"
    }).then(res=>{

        // 3. 渲染页面
        render($("tbody"), goods, res);

        // 4. 单个选中
        $("tbody").on("change",".check", function(){
            // 获取选中状态
            const c = this.checked;
            // 获取当前商品id
            const id = $(this).parent().parent().attr("index");
            // 过滤数据
            const data = filterData(goods, id, function(i){
                goods[i].check = Number(c);
            })
            // 将过滤后的数据，存回本地存储
            localStorage.setItem("goods",JSON.stringify(data))

            // 判断是否需要全选
            $("#allCheck")[0].checked = goods.every(val=>val.check);

            // 重新计算总数量
            $("#allNum").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num : prev;
            }, 0))

            // 重新计算总价
            $("#allPrice").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num * now.price : prev;
            }, 0))
        })

        // 5. 修改数量
        $("tbody").on("input", ".num", function(){
            const id = $(this).parent().parent().attr("index");
            const num = $(this).val();
            const data = filterData(goods, id, function(i){
                goods[i].num = Number(num);
            })
            localStorage.setItem("goods",JSON.stringify(data))

            // 重新计算总数量
            $("#allNum").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num : prev;
            }, 0))

            // 重新计算总价
            $("#allPrice").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num * now.price : prev;
            }, 0))
        })

        // 6. 删除单个
        $("tbody").on("click", ".del", function(){
            const id = $(this).parent().attr("index");
            $(this).parent().remove();
            const data = filterData(goods, id, function(i){
                goods.splice(i, 1)
            })
            localStorage.setItem("goods",JSON.stringify(data))

            // 判断是否需要全选
            $("#allCheck")[0].checked = goods.every(val=>val.check);

            // 重新计算总数量
            $("#allNum").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num : prev;
            }, 0))

            // 重新计算总价
            $("#allPrice").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num * now.price : prev;
            }, 0))
        })

        // 7. 全选选中
        // 单个对应全选
        $("#allCheck")[0].checked = goods.every(val=>val.check);
        // 全选对应单个
        $("#allCheck").on("change",function(){
            // 根据全选按钮的状态，设置单个选中状态，同时修改数据
            const data = allCheck($(".check"), this.checked, goods);
            localStorage.setItem("goods",JSON.stringify(data));

            // 重新计算总数量
            $("#allNum").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num : prev;
            }, 0))

            // 重新计算总价
            $("#allPrice").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num * now.price : prev;
            }, 0))
        })

        // 8. 总数量
        $("#allNum").html(goods.reduce((prev, now)=>{
            return now.check ? prev + now.num : prev;
        }, 0))

        // 9. 合计
        $("#allPrice").html(goods.reduce((prev, now)=>{
            return now.check ? prev + now.num * now.price : prev;
        }, 0))

        // 10. 删除选中
        $("#delCheck").click(function(){
            // 过滤出数据中没有被选中的部分
            goods = goods.filter(val=>!val.check);
            // 重新覆盖元数据
            localStorage.setItem("goods",JSON.stringify(goods));

            // 重新渲染页面
            render($("tbody"), goods, res);

            // 重新计算总数量
            $("#allNum").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num : prev;
            }, 0))

            // 重新计算总价
            $("#allPrice").html(goods.reduce((prev, now)=>{
                return now.check ? prev + now.num * now.price : prev;
            }, 0))
        })
    })
})

